<?php
/**
 * Template Name: 独立下载页面
 */
get_header();

$post_id = absint($_GET['post_id']);
$post = get_post($post_id);
if (!$post) wp_die('错误：该文章不存在或已被删除');
$download_links = get_post_meta($post_id, 'download_links', true);
?>

<style>
/* 自适应下载框样式 */
.sdlp-download-page {
    background-color: #f0f2f5;
    padding: 40px 20px;
}

.download-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.page-title {
    font-size: 2.5rem;
    color: #1a73e8;
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 3px solid #ebf0f5;
    padding-bottom: 15px;
}

.download-section-title {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.download-section-title::before {
    content: "";
    width: 6px;
    height: 30px;
    background-color: #1a73e8;
    margin-right: 15px;
    border-radius: 3px;
}

/* 自适应下载按钮 */
.download-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background-color: #1a73e8;
    color: #ffffff;
    padding: 14px 30px;
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: 500;
    transition: all 0.3s ease;
    max-width: 100%;
    word-wrap: break-word;
    min-width: 240px;
}

.download-btn:hover {
    background-color: #1557b0;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.15);
}

.download-btn i {
    font-size: 1.3rem;
    margin-right: 10px;
}

/* 提取码样式 */
.extraction-code-box {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #f8f9fa;
    border-radius: 6px;
    font-size: 1rem;
    color: #666;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    word-wrap: break-word;
    max-width: 100%;
}

.extraction-code-box:hover {
    background-color: #f0f2f5;
}

.extraction-code-box:active {
    transform: scale(0.98);
}

.copy-success {
    margin-left: 8px;
    color: #2ecc71;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.95rem;
}

.extraction-code-box:active .copy-success {
    opacity: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .download-btn {
        padding: 12px 24px;
        font-size: 1rem;
        min-width: auto;
        width: 100%;
    }
    
    .extraction-code-box {
        padding: 6px 12px;
        font-size: 0.95rem;
    }
}

.notice-section {
    background-color: #f9fafb;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 30px;
}

.notice-title {
    color: #ff9400;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.notice-list {
    list-style: none;
    padding-left: 20px;
}

.notice-list li {
    position: relative;
    margin-bottom: 8px;
}

.notice-list li::before {
    content: "•";
    color: #ff9400;
    position: absolute;
    left: -12px;
}

.back-to-post {
    text-align: center;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #ebf0f5;
}

.back-link {
    color: #1a73e8;
    text-decoration: none;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}

.back-link i {
    margin-right: 6px;
    font-size: 1.1rem;
}
</style>

<div class="sdlp-download-page">
    <div class="download-container">
        <h1 class="page-title"><?php echo esc_html($post->post_title); ?> - 下载资源</h1>
        
        <?php if (!empty($download_links)): ?>
        <div class="download-section">
            <h2 class="download-section-title">可下载资源</h2>
            <div class="download-links">
                <?php foreach ($download_links as $link): ?>
                <div class="download-item">
                    <a href="<?php echo esc_url($link['url']); ?>" class="download-btn">
                        <?php if ($link['icon'] !== 'default'): ?>
                        <i class="fa <?php echo esc_attr($link['icon']); ?>"></i> 
                        <?php endif; ?>
                        <?php echo esc_html($link['name']); ?>
                    </a>
                    
                    <?php if (!empty($link['extraction_code'])): ?>
                    <div class="extraction-code-box" data-clipboard-text="<?php echo esc_html($link['extraction_code']); ?>">
                        提取码：<?php echo esc_html($link['extraction_code']); ?>
                        <span class="copy-success">已复制 ✔</span>
                    </div>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php else: ?>
        <p class="no-resources" style="text-align: center; color: #666; font-size: 1.1rem;">该文章未提供任何下载资源</p>
        <?php endif; ?>
        
        <div class="notice-section">
            <h3 class="notice-title">注意事项</h3>
            <ul class="notice-list">
                <li>下载内容仅供学习研究，严禁商业用途</li>
                <li>请在下载后24小时内删除，支持正版资源</li>
                <li>如遇链接失效，请联系网站管理员</li>
            </ul>
        </div>
        
        <div class="back-to-post">
            <a href="<?php echo get_permalink($post_id); ?>" class="back-link">
                <i class="fa fa-arrow-left"></i> 返回文章《<?php echo esc_html($post->post_title); ?>》
            </a>
        </div>
    </div>
</div>

<!-- 提取码复制功能JS -->
<script>
document.addEventListener('DOMContentLoaded', () => {
    const extractionBoxes = document.querySelectorAll('.extraction-code-box');
    
    extractionBoxes.forEach(box => {
        box.addEventListener('click', async (e) => {
            const code = e.target.dataset.clipboardText || e.target.closest('.extraction-code-box').dataset.clipboardText;
            if (!code) return;
            
            try {
                await navigator.clipboard.writeText(code);
                e.target.querySelector('.copy-success').style.opacity = '1';
                
                // 2秒后隐藏提示
                setTimeout(() => {
                    e.target.querySelector('.copy-success').style.opacity = '0';
                }, 2000);
            } catch (error) {
                console.error('复制提取码失败:', error);
            }
        });
    });
});
</script>

<?php get_footer(); ?>